<template>
  <div class="warp" :style="{ width: !isCollapse ? '220px' : '' }">
    <el-scrollbar>
      <el-menu
        :collapse="isCollapse"
        :background-color="side_bg"
        :text-color="side_text"
        :default-active="currentPath"
        :router="true"
      >
        <template :index="item.path" v-for="(item, index) in list" :key="index">
          <!-- 有子级 -->
          <el-sub-menu
            :index="index + ''"
            v-if="item.children && item.children.length"
          >
            <template #title>
              <el-icon>
                <component :is="item.ico" />
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <!-- 二级 -->
            <el-menu-item
              :index="itm.path"
              v-for="(itm, indx) in item.children"
            >
              {{ itm.title }}
            </el-menu-item>
          </el-sub-menu>
          <!-- 没有子集 -->
          <el-menu-item :index="item.path" v-else>
            <el-icon>
              <component :is="item.ico" />
            </el-icon>
            <template #title>
              <span>{{ item.title }}</span>
            </template>
          </el-menu-item>
        </template>
        <!-- <el-menu-item index="/Index">
          <i class="el-icon-house"></i>
          <template #title>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-sub-menu index="2">
          <template #title>
            <i class="el-icon-setting"></i> <span>系统设置</span>
          </template>
          <el-menu-item index="/MenuManage">菜单管理</el-menu-item>
          <el-menu-item index="2-2">用户管理</el-menu-item>
          <el-menu-item index="2-3">角色管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3">
          <i class="el-icon-user"></i>
          <template #title> <span>个人中心</span> </template>
        </el-menu-item> -->
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { reactive, toRefs, onUnmounted, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { side_bg, side_text } from "@/assets/css/them_scss";
export default {
  name: "Index",
  setup() {
    const store = useStore();
    const router = useRouter();
    const state = reactive({
      currentPath: "/index", //当前激活菜单的 index
      // list: computed(() => store.state.memuList), //vuex获取菜单列表
      isCollapse: computed(() => store.state.isCollapse), //菜单收缩控制
      list: [
        //菜单列表
        {
          ico: "House",
          title: "首页",
          path: "/index",
        },
        {
          ico: "Setting",
          title: "系统配置",
          path: "/systemSettings",
          children: [
            {
              title: "菜单管理",
              path: "/systemSettings/menuManage",
            },
            {
              title: "角色管理",
              path: "/systemSettings/roleManage",
            },
            {
              title: "用户管理",
              path: "/systemSettings/userManage",
            },
          ],
        },
      ],
    });
    onMounted(() => {
      store.dispatch("asyncSetMemuList"); //获取左侧菜单列表
    });
    onUnmounted(() => {
      unwatch();
    });
    const unwatch = router.beforeEach((to, from, next) => {
      next();
      state.currentPath = to.path;
    });
    return {
      ...toRefs(state),
      side_bg, //背景颜色
      side_text, //文字颜色
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  height: 100vh;
  background: $side_bg;
  :deep() {
    .el-menu {
      border-right: none;
    }
    .el-icon {
      margin-right: 15px;
      svg {
        font-size: 18px;
        margin-top: -6px;
      }
    }
  }
}
</style>